<template>
    <el-row
    :gutter="20"
    style="height: 60px; overflow: hidden; display: flex; align-items: center"
  >
    <el-col :span="5" style="display: flex; align-items: center">
      
      <span style="font-size: 20px; font-weight: bold; margin-left: 10px">废品回收系统</span>
    </el-col>
    <el-col :span="15">
      <el-menu
        mode="horizontal"
        :ellipsis="false"
        :default-active="activeIndex"
        router
      >
        <el-menu-item index="/" @click="changeActive('/')">主页</el-menu-item>
        <el-menu-item v-show="userStore.role==='2'" index="/tasklist" @click="changeActive('/tasklist')">抢单任务</el-menu-item>
        <el-menu-item v-show="userStore.role==='1'||userStore.role==='2'" index="/orderlist" @click="changeActive('/orderlist')">我的订单</el-menu-item>
        <el-menu-item v-show="userStore.role==='1'" index="/publish" @click="changeActive('/publish')">发布任务</el-menu-item>
        <el-menu-item v-show="userStore.role==='3'" index="/admin" @click="changeActive('/admin')">管理中心</el-menu-item>
      </el-menu>
    </el-col>
    <el-col
      :span="4"
      style="display: flex; align-items: center; flex-wrap: nowrap"
    >
      <div>
        <el-button @click="register" v-if="data.LoginOrRegister=='1'">还没有账号？注册一个</el-button>
        <el-button type="success" @click="login" v-else>返回登录</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useWebsiteStore } from '@/stores/website'
import { useUserStore } from '@/stores/user';

const websiteStore = useWebsiteStore()
const router = useRouter()
const emit = defineEmits(['register'])
const data = defineProps({ LoginOrRegister: String })

const userStore = useUserStore()
const activeIndex = ref(websiteStore.getActiveIndex)
const changeActive = (index) => {
  activeIndex.value = index
  websiteStore.changeActiveIndex(index)
}
const register = () => {
  emit('register',2)
}
const login = () =>{
  emit('register',1)
}
</script>

<style scoped>
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom:2px solid var(--el-color-success);
  color:var(--el-color-success)!important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    background-color: var(--el-color-success-light-7);
    color: var(--el-color-success-light-3);
}
</style>